import React,{ useEffect, useState } from 'react';
// import styles from './index.less';
import { Menu } from 'antd';
import { history} from 'umi'
const { SubMenu } = Menu;
import { menuOneApi, menuOtherApi } from '@/api'
export default function SiderMenu() {
  const [menuOne, setMenuOne] = useState([])
  const [menuOther, setMenuOther] = useState([])
  /** 获取菜单接口 */
  const getMenuLists = async () => {
    const {data: {data}} = await menuOneApi()
    setMenuOne([...data])
    const obj = {parentId: data[0].menuId}
    const res = await menuOtherApi(obj)
    setMenuOther([...res.data.data])
  }
  useEffect(() => {
    getMenuLists()
  } , [])

  const changeRouteHandler = ({key}) => {
    if(key !== '1'){
      history.push(key)
    }
  }

  return (
    <div>
      <Menu
          defaultOpenKeys={['/activityManagement']}
          defaultSelectedKeys={['/createActivity']}
          mode="inline"
          onClick={changeRouteHandler}
          theme="dark"
      >
        <Menu.Item
            key="1"
            style={{
            background: '#00284d',
            height: 60,
          }}
        >
          <h1
              style={{
              color: '#fff',
              fontWeight: 600,
            }}
          >
            招行-秦学后台管理
          </h1>
        </Menu.Item>
            {
              menuOne.map(item => (
                <SubMenu key={item.menuUrl}
                    title={item.menuName}
                >
                {
                  menuOther.map(obj => (
                      <Menu.Item key={obj.menuUrl}>{obj.menuName}</Menu.Item>
                  ))
                }
              </SubMenu>
              ))
            }
      </Menu>
    </div>
  );
}
